<template>
	<view class="order-content">
		<view class="top">
			<view class="top-box">
				<span>距我多少</span>
				<span>{{worksheet.distance}}km</span>
				<uni-icons type="location-filled" size="20" color="#2E49E8"></uni-icons>
			</view>
			<view class="top-box">
				<view class="time">到期时间:{{worksheet.expireTime}}</view>
			</view>
		</view>
		<view class="center">
			<span>{{worksheet.installAddress}}</span>
			<button type="primary" size="mini" @click="navigateToNavigation(worksheet.installLngat)">
				<uni-icons type="location-filled" color="#fff" size="15"></uni-icons>导航
			</button>
		</view>
		<view class="bottom">
			<map class="map" :latitude="latitude" :longitude="longitude" :markers="covers" :scale="15" :show-location="true" @markertap="markertap">
				<cover-view class="map-view" @click="listOrder">
					<cover-view @click="listOrder">列表接单</cover-view>
				</cover-view>
			</map>		
		</view>
	</view>
</template>

<script>
	import * as API from '@/common/api';
	export default {
		name:"pages-orderPool-mapOrder",
		data() {
			return {
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [],
				params: {
					isPool: true,
					worksheetState: '0',
				},
				orderList: [],
				status: 'loadmore',
				worksheet:{},
				worksheetId:'',
	
			}
		},
		methods: {
			goToDetail(worksheetNumber) {
				uni.navigateTo({
					url: '/pages/myOrder/orderDetail?worksheetNumber=' + worksheetNumber
				})
			},
			listOrder() {
				this.$emit('change')
			},
			async getInitOrderList() {
				await this.getCurLoc();
				setTimeout(() => {
					this.status = 'loadmore';
					this.orderList = [];
					this.getOrderList();
				}, 2000)
			
			},
			async getCurLoc() {
				uni.getLocation({
					success: (res) => {
						this.longitude = res.longitude;
						this.latitude = res.latitude;
					},
					fail: (res) => {
						console.log("得到经纬度失败", res);
					}
				});
			},
			async getOrderList() {
				if (this.status != 'nomore') {
					this.status = 'loading';
					const res = await API.listAllWorksheet({
						params: this.params
					});
					console.log("得到的订单列表",res);
					res.rows.forEach(row => {
						if (row.imageVideoUrl) {
							row.imgUrl = row.imageVideoUrl.split(",")[0];
						}
			
					})
					this.orderList = this.orderList.concat(res.rows);
					await this.getCoversList();
				}
			
			},
			getDistance(lat1, lon1) {
				const lat2 = this.latitude;
				const lon2 = this.longitude;
				const R = 6371000; // 地球平均半径，单位米
				const dLat = (lat2 - lat1) * Math.PI / 180;
				const dLon = (lon2 - lon1) * Math.PI / 180;
				const a =
					Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2);
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				const distance = (R * c) / 1000;
				return Number(distance).toFixed(2);
			},
			async getCoversList() {
				this.covers = [{
					id: 0,
					longitude: this.longitude,
					latitude: this.latitude,
					iconPath: '../../../static/myloc.png'
				}];
				for (const row of this.orderList) {
					const res = await API.getDeviceById(row.deviceId);
					let installLngat = res.data.installLngat;
					let latitude = installLngat.split(",")[1];
					let longitude = installLngat.split(",")[0];
					row.installLngat = res.data.installLngat;
					row.distance = this.getDistance(latitude, longitude);
					this.covers.push({
						id: row.id,
						longitude: longitude,
						latitude: latitude,
						callout: {
							content: res.data.customerName,
							display: 'ALWAYS',
							textAlign: 'center',
							bgColor: '#0000AA'
						},
						iconPath: '../../../static/worksheet.png'
					})
				}
			},
			navigateToNavigation(installLngat) {
				let longitude = Number(installLngat.split(",")[0]);
				let latitude = Number(installLngat.split(",")[1]);
			
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					success: function() {
						console.log('导航成功');
					},
					fail: (err) => {
						console.log("打开失败", err);
					}
				});
			
			},
			async markertap(e)
			{
				if(this.worksheetId&&e.detail.markerId)
				{
					this.goToDetail(this.worksheet.worksheetNumber);
				}
				else
				{
					const res=await API.getWorksheetById(e.detail.markerId);
					this.worksheet=res.data;
					this.worksheetId=e.detail.markerId;
					const deviceRes = await API.getDeviceById(this.worksheet.deviceId);
					let installLngat = deviceRes.data.installLngat;
					let latitude = installLngat.split(",")[1];
					let longitude = installLngat.split(",")[0];
					this.worksheet.installLngat = deviceRes.data.installLngat;
					this.worksheet.installAddress= deviceRes.data.installAddress;
					this.worksheet.distance = this.getDistance(latitude, longitude);
				}
			}
		}
	}
</script>

<style lang="less">
	.top {
		display: flex;
		align-items: center;
		gap: 10px;
		justify-content: center;
		width: 100%;
		height: 60px;
		background-color: #fff;
		border-radius: 8px;
		.top-box{
			width: 46%;
			height: 65%;
			background-color: #F2F7FA;
			color: #989898;
			border: 1px solid #DCE0E3;
			border-radius: 6px;
			font-size: 13px;
			line-height: 35px;
			display: flex;
			align-items: center;
			
			span {
				margin-left: 10px;
			}
			span:nth-of-type(2) {
				flex: 1;
			}
			.time
			{
				font-size: 20rpx;
				color:red;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				margin-left: 10px;
			}
			image {
				width: 10.5px;
				height: 11.67px;
				margin-right: 5px;
				justify-self: flex-end;
			}
		}
	}
	.center {
		height: 30px;
		background-color: #fff;
		border-radius: 8px;
		margin-top: 10px;
		padding: 10px;
		display: flex;
		align-items: center;
		background-color: #F2F7FA;
		color: #989898;
		font-size: 14px;
		span {
			flex: 5;
		}
		button {
			flex: 1;
			display: flex;
			gap: 5px;
			align-items: center;
		}
	}
	.bottom {
		margin-top: 10px;
		border-radius: 8px;
		position: relative;
		.map {
			position: relative;
			width: 100%;
			height: 1000rpx;
			border-top: 1px solid rgba(255, 255, 255, 1);
			border-left: 1px solid rgba(255, 255, 255, 1);
			box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
			border-radius: 10rpx;
			background: #ffffff;
			.map-view {
				position: absolute;
				right: 10px;
				bottom: 10px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				height: 60rpx;
				width: 160rpx;
				background-color: #fff;
				box-shadow: 1px 4px 10px 0px rgba(0,0,0,0.5);
				border-radius: 15px;
				color: #304EEB;
				font-size: 27rpx;
			}
			
		}
		
	}
	
</style>
